<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			button{
				width: 60px;
				height: 30px;
				margin-left: 540px;
				color: #fff;
				background-color: orange;
				border: 2px solid #f17704;
				border-radius: 6px;
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="btnClick(1)">添加</button>
		<table id="mytable" width="600px" border="1">
			<tbody>
				
			</tbody>
		</table>
		
		<script type="text/javascript">
			console.log(table);//undefined：表示没有被赋值
			//引用  =   对象
			var table = document.getElementById("mytable"); //表示已经获取了id为mytable的标签
			console.log(table);//table对象
			//2.加上表头，使用document创建元素
			let caption = document.createElement("caption");
			caption.innerText = "添加开箱货物";
			table.appendChild(caption);
			
			let tbody = document.createElement("tbody");
			table.appendChild(tbody);
			
			let thead = document.createElement("thead");
			//将head标签的引用thead，附加到table中
			table.appendChild(thead);
			let tr = document.createElement("tr");
			thead.appendChild(tr);
			let th = document.createElement("th");
			th.innerText = "大类";//插入文本
			tr.appendChild(th);
			th = document.createElement("th");
			th.innerText = "小类";
			tr.appendChild(th);
			th = document.createElement("th");
			th.innerText = "单位";
			tr.appendChild(th);
			th = document.createElement("th");
			th.innerText = "件数";
			tr.appendChild(th);
			th = document.createElement("th");
			th.innerText = "描述";
			tr.appendChild(th);
			th = document.createElement("th");
			th.innerText = "操作";
			tr.appendChild(th);
	
			let arrProduct = ["肉类","水果","活动动物","杂货"];
			let arrPrice = ["猪肉","进口水果","猴子","杂货"];
			let arrRating = ["1","1","1","1"];
			let arrDanwei = ["箱","箱","只","箱"];
			let arrmiaoshu = ["无","无","无","1111"];
			let arrcaozuo = ["编辑","删除"];
			let btn1 = document.getElementById("button");
			btn1.innerText= "编辑";
			let btn2 = document.getElementById("button");
			btn2.innerText = "删除";
			let len = arrProduct.length;
			for(let i = 0; i < len; i++){
				
				tr = document.createElement("tr");
				tbody.appendChild(tr);
				let td = document.createElement("td");
				td.innerText = arrProduct[i];
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText = arrPrice[i];
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText = arrRating[i];
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText = arrDanwei[i];
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText = arrmiaoshu[i];
				tr.appendChild(td);
				td = document.createElement("td");
				tr.appendChild(td);
				td.appendChild(btn1);
				td.appendChild(btn2);
			}
			
			//写在函数中，然后通过HTML标签的事件来触发
			
			function btnClick(val){
				console.log(val);
			}
		</script>
	</body>
</html>
